<template>
  <div class="rebar-top">
    <div>
      <div class="rebar-name">数字化平台</div>
      <div class="rebar-breadcrumb" v-show="breadcrumbList.length">
        <el-breadcrumb :separator-icon="'ArrowRight'">
          <el-breadcrumb-item @click="linkPage(item)"  :key="idx"
                              v-for="(item,idx) in breadcrumbList">
            {{item.name}}
          </el-breadcrumb-item>
        </el-breadcrumb>
      </div>
    </div>
    <div class="head-right">
      <div class="item">
        <img src="@assets/images/icon/data.png" width="16" />数据看板
      </div>
      <el-badge :value="12">
        <div class="item">
          <img src="@assets/images/icon/msg.png" width="16" />消息
        </div>
      </el-badge>
      <el-dropdown popper-class="user-dropdown" style="height: 100%">
        <div class="el-dropdown-link user-icon">
          <img src="@assets/images/icon/head_img.png" />
        </div>
        <template #dropdown>
          <el-dropdown-menu class="user-menu">
            <el-dropdown-item>
              <img src="@assets/images/icon/user-icon.png" />个人信息
            </el-dropdown-item>
            <el-dropdown-item @click="loginOut">
              <img src="@assets/images/icon/logout.png" />退出登录
            </el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </div>
</template>

<script>
export default {
  name: "rebarMainHead",
  data() {
    return {

    }
  },
  props:{
    breadcrumbList: {
      type: Object,
      default(){
        return {}
      }
    }
  },
  methods: {
    linkPage(item){
      console.log(item)
      return;
      //第三级才会有路由
      this.breadcrumbList = [item];
      if(item.path == '/proofingManage'){
        item.path = '/proofingManage/MaterialProofing';
      }
      this.$store.commit('changeCurrentPath',item.path);
      localStorage.setItem('currentPath',item.path);
      this.$router.push(item.path);
    },
    loginOut(){
      localStorage.removeItem('currentMenu');
      localStorage.removeItem('userInfo');
      localStorage.removeItem('currentPath');
      this.$store.commit('changeCurrentPath','/proofingManage/MaterialProofing');

      this.$router.push('/login')
    },
  }
}
</script>

<style scoped lang="scss">
.rebar-top{
  height: 90px;
  display: flex;
  justify-content: space-between;
  padding-left: 43px;
  text-align: left;
  background: url("@assets/images/header_bg.png") no-repeat left top;
  background-size: cover;
  opacity: 0.9;
  color: #fff;

  .rebar-name{
    font-size: 24px;
    font-weight: bold;
    color: #FEFEFE;
    padding-top: 20px;
  }
  .rebar-breadcrumb{
    margin-top: 8px;
    ::v-deep(.el-breadcrumb__inner){
      color: #fff;
      font-size: 14px;
      opacity: 0.5;
    }
    ::v-deep(.el-breadcrumb__inner.is-link){
      opacity: 1;
      font-weight: 400;
    }

    ::v-deep(.el-breadcrumb__item){
      &:last-child{
        .el-breadcrumb__inner{
          opacity: 1;
        }
      }
    }
  }
  .head-right{
    display: flex;
    align-items: center;
    .item{
      height: 18px;
      line-height: 20px;
      padding: 4px 16px;
      border: 1px solid #FFFFFF;
      border-radius: 14px;
      margin-left: 28px;
      font-size: 14px;
      cursor: pointer;

      &:hover{
        background-color: rgba(255,255,255,.3);
      }

      img{
        vertical-align: top;
        margin-right: 4px;
      }
    }
    .user-icon{
      height: 100%;
      border-left: 1px solid rgba(255,255,255,0.3);
      margin-left: 28px;
      cursor: pointer;
      img{
        margin-top: 18px;
        padding: 0 47px;
      }
      ul{
        background: #F5FAFF;
        border: 1px solid #009CFF;
        box-shadow: 0px 8px 13px 0px rgba(0, 0, 0, 0.15);
        border-radius: 4px;
        padding: 10px 0;
        margin-top: 15px;
        li{
          width: 128px;
          height: 32px;
          line-height: 32px;
          text-align: center;
          color: #15379A;
          font-size: 14px;
          margin: 0 auto 10px;
          cursor: pointer;

          &:hover{
            background: linear-gradient(90deg, rgba(21, 55, 154, 0.2), rgba(32, 158, 255, 0.2));
            border-radius: 16px;
            color: #15379A;
            font-weight: 400;
          }

          &:last-child{
            margin-bottom: 0;
          }
        }
      }
    }
  }

  .el-icon{
    font-size: 30px;
    margin-top: 14px;
    margin-left: 15px;
  }

}
</style>
<style lang="scss">
.user-dropdown{
  width: 118px;
  margin-left: 12px !important;
  padding: 15px !important;

  li{
    height: 22px;
    line-height: 23px;
    color: rgba(24,55,154,0.6);
    font-weight: 400;
    text-align: center;
    margin-bottom: 15px;

    &:focus{
      background: linear-gradient(90deg, rgba(21, 55, 154, 0.2), rgba(32, 158, 255, 0.2));
      border-radius: 16px;
      color: rgba(24,55,154,0.6) !important;
    }
    &:last-child{
      margin-bottom: 0;
    }

    img{
      margin-right: 10px;
    }
  }
}
</style>